<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <title>ONE-PHP安装</title>
    <link rel="stylesheet" href="static/lib/element-ui@2.15.1/lib/theme-one/index.css">
    <link rel="stylesheet" href="static/css/flex.css">

    <script src="static/lib/vue@2.6.12/dist/vue.min.js"></script>
    <script src="static/lib/qs@6.9.4/dist/qs.js"></script>
    <script src="static/lib/axios@0.21.0/dist/axios.min.js"></script>
    <script src="static/lib/element-ui@2.15.1/lib/index.js"></script>
    <script>
        const _csrf = '';
        const _token = '{$Request.token}';
        const _scriptUrl = 'index.php'
    </script>
    <script src="static/js/common.js?v=1.0.0"></script>
</head>

<body>
    <div v-cloak id="app">
        <div class="install">
            <div class="bg"></div>
            <div class="content">
                <div id="step">
                    <el-steps :active="active">
                        <el-step title="许可协议" icon="el-icon-s-check"></el-step>
                        <el-step title="环境检测" icon="el-icon-s-opportunity"></el-step>
                        <el-step title="参数配置" icon="el-icon-s-tools"></el-step>
                    </el-steps>
                    <el-divider></el-divider>
                </div>
                <div id="tool">
                    <div v-if="active==1" flex="main:justify">
                        <el-button size="small" :disabled="!flag"  :type="flag ? 'primary' : 'danger'" @click="goto(active+1)">继续</el-button>
                        <el-checkbox v-model="flag">我已经阅读并同意此协议</el-checkbox>
                    </div>
                    <div v-if="active==2" flex="main:left">
                        <el-button size="small"  type="default" @click="goto(active-1)">后退</el-button>
                        <el-button size="small" :disabled="!flag"  :type="flag ? 'primary' : 'danger'" @click="goto(active+1)">继续</el-button>
                    </div>

                </div>
                <div id="main">
                    <component :is="`step${active}`" :active="active" @flag="changeFlag"></component>
                </div>
            </div>
        </div>
    </div>
</body>
{include file='install@components/step1'}
{include file='install@components/step2'}
{include file='install@components/step3'}
<script>
    const captcha_src = '{:captcha_src()}'
    _layout = new Vue({
        el: '#app',
        data() {
            return {
                msg:'请先阅读并同意协议',
                flag:false,
                active:1,
                readPact:false,
                fdata: {
                },
            }
        },
        created() {

        },
        mounted() {
            this.$nextTick(() => {
                
            });
        },
        methods: {
            goto(step){
                this.active = step
            },
            changeFlag(flag){
                this.flag = flag
            }
        }
        
    })
</script>
<style>
    * {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
        padding: 0;
        margin: 0;
        background: #fafafa !important;
    }

    .install .bg {
        width: 100%;
        height: 200px;
        background: #00C250;
    }

    .install .content {
        width: 1180px;
        min-height: 600px;
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        margin: auto;
    }

    

    .install #main {
        margin-top: 20px;
    }

    .install #main .step1-content {
        overflow-y: scroll;
        padding: 10px;
        border: 1px solid #ddd;
        height: 400px;
        line-height: 21px;
        color: #666;
    }

    .install #main .step1-content::-webkit-scrollbar {
        width: 6px;
        background-color: #FFF;
    }

    .install #main .step1-content::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #494E51;
    }

    .install #main .step1-content::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }
</style>

</html>